<template>
  <div class="echarts h-auto">
    <ECharts
      v-if="option"
      :option="option"
      :id="`Line` + props.id"
      ref="lineEChartsRef"
      @click="handlePieClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { boxShadow } from "html2canvas/dist/types/css/property-descriptors/box-shadow";
import { getPieces } from "../index";
import { color } from "echarts";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  showName: {
    type: Boolean,
    default: true,
  },
  // 曲线x轴/y轴数据
  seriesData: {
    type: Object,
    default: () => {
      return {
        paramName: "Journal C-Diameter (bottom)",
        upperLimitValue: 515,
        lowerLimitValue: 280,
        controlDown: 290,
        controlUp: 490,
        parameterStandards: 350,
        xdataIndex: [
          "1",
          "2",
          "4",
          "6",
          "8",
          "10",
          "12",
          "14",
          "16",
          "18",
          "20",
        ],
        xdata: [
          "2024-01-11 12:00",
          "2024-01-11 12:02",
          "2024-01-11 12:04",
          "2024-01-11 12:06",
          "2024-01-11 12:08",
          "2024-01-11 12:10",
          "2024-01-11 12:12",
          "2024-01-11 12:14",
          "2024-01-11 12:16",
          "2024-01-11 12:18",
          "2024-01-11 12:20",
        ],
        ydata: [250, 380, 515, 243, 280, 500, 280, 540, 243, 280, 260],
      };
    },
  },
});

// ...existing code...

const emit = defineEmits(["pieClick"]); // 声明事件

const { seriesData, showName } = toRefs(props);
const option = ref();
const lineEChartsRef = ref();

// 折线图数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    setOptions();
  },
  {
    deep: true,
    immediate: true,
  }
);

function setOptions() {
  option.value = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "center",
      top: 80,
      textStyle: {
        color: "#fff", // 这里设置字体颜色
        fontSize: 18, // 可选：设置字体大小
      },
    },
    series: [
      {
        type: "pie",
        radius: "40%",
        center: ["50%", "60%"], // 横向居中，纵向下移（50%→60%）
        radius: ["70%", "30%"],

        data: seriesData.value,
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //   },
        // },
        itemStyle: {
          normal: {
            color: function (colors) {
              var colorList = [
                "#5470c6",
                "#fc8251",
                "#91cd77",
                "#ef6567",
                "#f9c956",
                "#75bedc",
              ];
              return colorList[colors.dataIndex];
            },
          },
        },
        label: {
          show: true,
          position: "outside", // 标签显示在外部
          formatter: "{b}\n{c}个",
          textStyle: {
            fontSize: 18,
            color: "#fff",
            fontWeight: "400",
          },
        },
        labelLine: {
          show: true, // 显示指向线
          length: 160, // 第一段线长度
          length2: 50, // 第二段线长度
          smooth: false,
          lineStyle: {
            color: "#a3a5b5", // 线条颜色
            width: 1, // 线条宽度
          },
        },
      },
    ],
  };
}
function handlePieClick(params: any) {
  // params.name 是扇区的名称，params.data 是完整数据
  emit("pieClick", params); // 传递给父组件
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 500px;
}

.echarts:nth-last-child(1) {
  border-bottom: none !important;
}

.scroll-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
